@@include('../partials/_template-top.html', {
'bodyClass': 'home-one-bg'
})

@@include('../partials/_header.html')
<div id="scrollSmoother-container">
    @@include('../partials/_breadcrumb.html', {
    'breadcrumbText': 'Cart Page',
    'breadcrumbTitle': 'CART PAGE'
    })

    <section class="cart-area py-120 position-relative overflow-hidden z-1">
        <div class="container">
            <div class="row g-4">
                <div class="col-xl-8 col-12">
                    <div class="cart-table-wrapper">
                        <table class="cart-table">
                            <thead>
                                <tr>
                                    <th class="product-name" colspan="3">Product</th>
                                    <th class="product-price">Price</th>
                                    <th class="product-quantity">Quantity</th>
                                    <th class="product-subtotal">Subtotal</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="product-remove">
                                        <a href="javascript:void(0)" class="remove">
                                            <i class="ph ph-x"></i>
                                        </a>
                                    </td>
                                    <td class="product-thumbnail">
                                        <a href="shop-details.html">
                                            <img src="assets/images/thumbs/shop-product-1.webp" alt="img">
                                        </a>
                                    </td>
                                    <td class="product-name">
                                        <a href="shop-details.html">Minimal Cap</a>
                                    </td>
                                    <td class="product-price">
                                        <span class="amount">$ 99.00</span>
                                    </td>
                                    <td class="product-quantity">
                                        <div class="quantity-wrapper">
                                            <button class="minus"><i class="ph ph-minus"></i></button>
                                            <input type="number" value="1" min="1" max="100" class="qty">
                                            <button class="plus"><i class="ph ph-plus"></i></button>
                                        </div>
                                    </td>
                                    <td class="product-subtotal">
                                        <span class="amount">$ 99.00</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="product-remove">
                                        <a href="javascript:void(0)" class="remove">
                                            <i class="ph ph-x"></i>
                                        </a>
                                    </td>
                                    <td class="product-thumbnail">
                                        <a href="shop-details.html">
                                            <img src="assets/images/thumbs/shop-product-1.webp" alt="img">
                                        </a>
                                    </td>
                                    <td class="product-name">
                                        <a href="shop-details.html">Minimal Cap</a>
                                    </td>
                                    <td class="product-price">
                                        <span class="amount">$ 99.00</span>
                                    </td>
                                    <td class="product-quantity">
                                        <div class="quantity-wrapper">
                                            <button class="minus"><i class="ph ph-minus"></i></button>
                                            <input type="number" value="1" min="1" max="100" class="qty">
                                            <button class="plus"><i class="ph ph-plus"></i></button>
                                        </div>
                                    </td>
                                    <td class="product-subtotal">
                                        <span class="amount">$ 99.00</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="product-remove">
                                        <a href="javascript:void(0)" class="remove">
                                            <i class="ph ph-x"></i>
                                        </a>
                                    </td>
                                    <td class="product-thumbnail">
                                        <a href="shop-details.html">
                                            <img src="assets/images/thumbs/shop-product-1.webp" alt="img">
                                        </a>
                                    </td>
                                    <td class="product-name">
                                        <a href="shop-details.html">Minimal Cap</a>
                                    </td>
                                    <td class="product-price">
                                        <span class="amount">$ 99.00</span>
                                    </td>
                                    <td class="product-quantity">
                                        <div class="quantity-wrapper">
                                            <button class="minus"><i class="ph ph-minus"></i></button>
                                            <input type="number" value="1" min="1" max="100" class="qty">
                                            <button class="plus"><i class="ph ph-plus"></i></button>
                                        </div>
                                    </td>
                                    <td class="product-subtotal">
                                        <span class="amount">$ 99.00</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="cart-bottom">
                        <div class="cart-coupon">
                            <input type="text" class="coupon-input" placeholder="Coupon code">
                            <button type="submit" class="coupon-btn">Apply Coupon</button>
                        </div>
                        <button type="submit" class="update-cart-btn">Update Cart</button>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 col-12 mx-auto">
                    <div class="cart-total-container">
                        <div class="cart-total-wrapper">
                            <h4 class="cart-total-title">Cart Total</h4>
                            <ul class="cart-total-list">
                                <li class="cart-total-list-item subtotal">Subtotal <span>$ 198.00</span></li>
                                <li class="cart-total-list-item total">Total <span>$ 198.00</span></li>
                            </ul>
                        </div>
                        <button type="submit" class="checkout-btn">Proceed to checkout</button>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="related-product-area position-relative overflow-hidden z-1">
        <div class="container">
            <!-- related products -->
            <div class="row">
                <div class="col-12">
                    <h3 class="title text-center">Related Products</h3>
                </div>
                <div class="row g-4">

                    <div class="col-xl-3 col-lg-4 col-sm-6 col-12 product-card-col">
                        <div class="product-card shop-one-card" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="200">
                            <div class="product-card-thumb">
                                <a href="shop-details.html">
                                    <img src="assets/images/thumbs/shop-product-1.webp" alt="img">
                                </a>
                                <div class="product-card-action-button-wrapper">
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-cart-btn" title="Add to Cart">
                                            <i class="ph ph-shopping-cart"></i>
                                        </button>
                                    </div>
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-compare-btn"
                                            title="Add to Compare">
                                            <i class="ph ph-sliders-horizontal"></i>
                                        </button>
                                    </div>
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-wishlist-btn"
                                            title="Add to Wishlist">
                                            <i class="ph ph-heart"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="product-card-content">
                                <div class="product-card-rating">
                                    <span class="product-card-rating-star">
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                    </span>
                                </div>

                                <h5 class="product-card-title">
                                    <a href="shop-details.html" class="">Formal Half-pant</a>
                                </h5>
                                <div class="product-card-meta">
                                    <span class="product-card-price">
                                        <span class="product-card-price-new">$ 99.00</span>
                                        <span class="product-card-price-old">$ 129.00</span>
                                    </span>
                                </div>

                                <div class="product-card-button text-center">
                                    <a class="text-only-button button-two btn-sm text--white hover-text-main-600"
                                        href="javascript:void(0);">
                                        <span class="theme-btn-text">Add to Cart</span>
                                        <span class="text-only-button-icon bg-main-600 text--white">
                                            <i class="ph ph-arrow-right"></i>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-3 col-lg-4 col-sm-6 col-12 product-card-col">
                        <div class="product-card shop-one-card" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="200">
                            <div class="product-card-thumb">
                                <a href="shop-details.html">
                                    <img src="assets/images/thumbs/shop-product-2.webp" alt="img">
                                </a>
                                <div class="product-card-action-button-wrapper">
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-cart-btn" title="Add to Cart">
                                            <i class="ph ph-shopping-cart"></i>
                                        </button>
                                    </div>
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-compare-btn"
                                            title="Add to Compare">
                                            <i class="ph ph-sliders-horizontal"></i>
                                        </button>
                                    </div>
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-wishlist-btn"
                                            title="Add to Wishlist">
                                            <i class="ph ph-heart"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="product-card-content">
                                <div class="product-card-rating">
                                    <span class="product-card-rating-star">
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                    </span>
                                </div>

                                <h5 class="product-card-title">
                                    <a href="shop-details.html" class="">Minimal Cap</a>
                                </h5>
                                <div class="product-card-meta">
                                    <span class="product-card-price">
                                        <span class="product-card-price-new">$ 99.00</span>
                                        <span class="product-card-price-old">$ 129.00</span>
                                    </span>
                                </div>

                                <div class="product-card-button text-center">
                                    <a class="text-only-button button-two btn-sm text--white hover-text-main-600"
                                        href="javascript:void(0);">
                                        <span class="theme-btn-text">Add to Cart</span>
                                        <span class="text-only-button-icon bg-main-600 text--white">
                                            <i class="ph ph-arrow-right"></i>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-3 col-lg-4 col-sm-6 col-12 product-card-col">
                        <div class="product-card shop-one-card" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="200">
                            <div class="product-card-thumb">
                                <a href="shop-details.html">
                                    <img src="assets/images/thumbs/shop-product-3.webp" alt="img">
                                </a>
                                <div class="product-card-action-button-wrapper">
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-cart-btn" title="Add to Cart">
                                            <i class="ph ph-shopping-cart"></i>
                                        </button>
                                    </div>
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-compare-btn"
                                            title="Add to Compare">
                                            <i class="ph ph-sliders-horizontal"></i>
                                        </button>
                                    </div>
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-wishlist-btn"
                                            title="Add to Wishlist">
                                            <i class="ph ph-heart"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="product-card-content">
                                <div class="product-card-rating">
                                    <span class="product-card-rating-star">
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                    </span>
                                </div>

                                <h5 class="product-card-title">
                                    <a href="shop-details.html" class="">Event T-Shirt</a>
                                </h5>
                                <div class="product-card-meta">
                                    <span class="product-card-price">
                                        <span class="product-card-price-new">$ 99.00</span>
                                        <span class="product-card-price-old">$ 129.00</span>
                                    </span>
                                </div>

                                <div class="product-card-button text-center">
                                    <a class="text-only-button button-two btn-sm text--white hover-text-main-600"
                                        href="javascript:void(0);">
                                        <span class="theme-btn-text">Add to Cart</span>
                                        <span class="text-only-button-icon bg-main-600 text--white">
                                            <i class="ph ph-arrow-right"></i>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-3 col-lg-4 col-sm-6 col-12 product-card-col">
                        <div class="product-card shop-one-card" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="200">
                            <div class="product-card-thumb">
                                <a href="shop-details.html">
                                    <img src="assets/images/thumbs/shop-product-4.webp" alt="img">
                                </a>
                                <div class="product-card-action-button-wrapper">
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-cart-btn" title="Add to Cart">
                                            <i class="ph ph-shopping-cart"></i>
                                        </button>
                                    </div>
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-compare-btn"
                                            title="Add to Compare">
                                            <i class="ph ph-sliders-horizontal"></i>
                                        </button>
                                    </div>
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-wishlist-btn"
                                            title="Add to Wishlist">
                                            <i class="ph ph-heart"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="product-card-content">
                                <div class="product-card-rating">
                                    <span class="product-card-rating-star">
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                    </span>
                                </div>

                                <h5 class="product-card-title">
                                    <a href="shop-details.html" class="">Tea Cup</a>
                                </h5>
                                <div class="product-card-meta">
                                    <span class="product-card-price">
                                        <span class="product-card-price-new">$ 99.00</span>
                                        <span class="product-card-price-old">$ 129.00</span>
                                    </span>
                                </div>

                                <div class="product-card-button text-center">
                                    <a class="text-only-button button-two btn-sm text--white hover-text-main-600"
                                        href="javascript:void(0);">
                                        <span class="theme-btn-text">Add to Cart</span>
                                        <span class="text-only-button-icon bg-main-600 text--white">
                                            <i class="ph ph-arrow-right"></i>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @@include('../partials/_footer-two.html')
</div>


@@include('../partials/_template-bottom.html')
</body>

</html>